<h4>Paste Image</h4>
<div>
  <button type="button" id="btnPreview" onclick="debug()">调试</button>
  <button type="button" id="btnPreview" onclick="preview()">预览</button>
</div>

<textarea rows="8" cols="40" id="result"></textarea>
<div id="container">点击[预览]查看预览图</div>

<script>
  document.getElementById("result").addEventListener("paste", function (e) {
    // 阻止粘贴
    e.stopPropagation();
    e.preventDefault();
    // 获取剪贴板信息
    var clipboardData = e.clipboardData || window.clipboardData;
    debugger
    var items = clipboardData.items;
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.kind == "file") {
        var pasteFile = item.getAsFile();
        var reader = new FileReader();
        reader.onload = function (event) {
          // 将结果显示在<textarea>中
          //debugger
          document.getElementById("result").value = event.target.result;
          preview()
        };
        // 将文件读取为BASE64格式字符串
        reader.readAsDataURL(pasteFile);
        break;
      } else if (item.kind == "string") {
        item.getAsString(text => {
          console.log(text);  //  在控制台输出剪贴板中的文本
          document.getElementById("result").value = text;
        });
      }
    }
    
  });

  const preview = () => {
    console.log('>> preview')
    img_data = document.getElementById("result").value
    el = document.getElementById("container")
    el.innerHTML = ''
    var img = new Image();
    //给img容器引入base64的图片
    //img.src = '';
    img.src = img_data
    el.appendChild(img)
    //将img容器添加到html的节点中。
    //document.body.appendChild(img);
  }


  const debug = () => {
    console.log('>> debug')
    debugger
  }


</script>
